<template>
	 <view>
		<view class="menu-box">
			<view class="menu01">
				<view class="menu01-item active" @click="getSelect()" >商圈</view>
				<view class="menu01-item" @click="getSelect()" >地铁</view>
			</view>
			<view class="menu02">
				<view class="menu02-item active">全长沙</view>
				<view class="menu02-item">岳麓区</view>
				<view class="menu02-item">雨花区</view>
				<view class="menu02-item">芙蓉区</view>
				<view class="menu02-item">开福区</view>
				<view class="menu02-item">天心区</view>
				<view class="menu02-item">长沙县</view>
				<view class="menu02-item">望城区</view>
				<view class="menu02-item">浏阳市</view>
				<view class="menu02-item">宁乡区</view>
			</view>
			<view class="menu03">
				<view class="menu03-item active">全岳麓区</view>
				<view class="menu03-item">露谷区</view>
				<view class="menu03-item">观沙岭</view>
				<view class="menu03-item">梅溪湖</view>
				<view class="menu03-item">汽车西站</view>
				<view class="menu03-item">涉外学院</view>
				<view class="menu03-item">含浦</view>
				<view class="menu03-item">岳麓大学城</view>
				<view class="menu03-item">洋湖</view>
				<view class="menu03-item">青山镇</view>
				<view class="menu03-item">西湖公园</view>
			</view>
		</view>
		<view class="btnbox">
			<button class="btn01">清除</button>
			<button class="btn02">确定</button>
		</view>
	 </view>
</template>

<script>
	export default{
		data(){
			return{
			}
		},
		methods:{
			getSelect(){
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F8F8F8;
	}
	.menu-box{
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height:100%;
		padding-bottom: 150rpx;
		.menu01{
			width: 200rpx;
			.menu01-item{
				padding-left: 50rpx;
				height: 100rpx;
				line-height: 100rpx;
			}
			.menu01-item.active{
				color:#12ADA9;
			}
		}
		.menu02{
			background: #FFFFFF;
			flex: 1;
			.menu02-item{
				padding-left: 50rpx;
				height: 100rpx;
				line-height: 100rpx;
			}
			.menu02-item.active{
				color:#12ADA9;
			}
		}
		.menu03{
			background: #FFFFFF;
			flex: 1;
			.menu03-item{
				padding-left: 50rpx;
				height: 100rpx;
				line-height: 100rpx;
			}
			.menu03-item.active{
				color:#12ADA9;
			}
		}
	}
	.btnbox{
		height: 150rpx;
		position: fixed;
		width: 100%;
		display: flex;
		background: #FFFFFF;
		bottom: 0;
		.btn01{
			margin-top:20rpx;
			height:91rpx;
			line-height: 91rpx;
			width: 216rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			color: #666666;
		}
		.btn02{
			margin-top:20rpx;
			width: 431rpx;
			height: 91rpx;
			line-height: 91rpx;
			background: #37C2BC;
			border-radius: 10rpx;
		}
	}
</style>
